<template>
  <view class="calendar-page">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack"><text class="fa fa-arrow-left"></text></view>
      <text class="nav-title">培训日历</text>
    </view>

    <!-- 主内容区域 -->
    <scroll-view scroll-y class="page-content">
      <!-- 月份切换 -->
      <view class="month-switch">
        <button class="switch-btn" @tap="previousMonth">
          <uni-icons type="left" size="14" color="#6b7280"></uni-icons>
          <text class="btn-text">上月</text>
        </button>
        <text class="current-month"
          >{{ currentYear }}年 {{ currentMonth }}月</text
        >
        <button class="switch-btn" @tap="nextMonth">
          <text class="btn-text">下月</text>
          <uni-icons type="right" size="14" color="#6b7280"></uni-icons>
        </button>
      </view>

      <!-- 星期标题 -->
      <view class="week-header">
        <text class="week-day">日</text>
        <text class="week-day">一</text>
        <text class="week-day">二</text>
        <text class="week-day">三</text>
        <text class="week-day">四</text>
        <text class="week-day">五</text>
        <text class="week-day">六</text>
      </view>

      <!-- 日历网格 -->
      <view class="calendar-grid">
        <view
          v-for="(day, index) in calendarDays"
          :key="index"
          :class="['day-item', getDayClass(day)]"
          @tap="selectDay(day)"
        >
          <text v-if="day.day" class="day-number">{{ day.day }}</text>
          <view
            v-if="day.hasBadge"
            class="day-badge"
            :class="day.badgeColor"
          ></view>
        </view>
      </view>

      <!-- 当日安排 -->
      <view class="daily-schedule">
        <text class="schedule-title"
          >当天安排（{{ selectedMonth }}月{{ selectedDay }}日）</text
        >
        <view class="schedule-card">
          <view class="schedule-info">
            <text class="schedule-name">ICU新人培训 · 直播研讨</text>
            <text class="schedule-time">19:30 - 20:30 · 签到</text>
          </view>
          <button class="enter-btn" @tap="enterLive">
            <text class="enter-text">进入</text>
          </button>
        </view>
      </view>

      <view class="bottom-space"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      currentTime: "09:41",
      currentYear: 2025,
      currentMonth: 9,
      selectedDay: 15,
      selectedMonth: 9,
      calendarDays: [],
    };
  },
  onLoad() {
    this.initStatusBar();
    this.updateTime();
    this.generateCalendar();
  },
  methods: {
    initStatusBar() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 20;
    },
    updateTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      this.currentTime = `${hours}:${minutes}`;
    },
    generateCalendar() {
      const year = this.currentYear;
      const month = this.currentMonth;

      // 获取当月第一天是星期几
      const firstDay = new Date(year, month - 1, 1).getDay();
      // 获取当月有多少天
      const daysInMonth = new Date(year, month, 0).getDate();

      const days = [];

      // 填充月初空白
      for (let i = 0; i < firstDay; i++) {
        days.push({ day: null });
      }

      // 填充日期
      for (let day = 1; day <= daysInMonth; day++) {
        const dayData = {
          day: day,
          isToday: day === this.selectedDay,
          hasBadge: false,
          badgeColor: "",
        };

        // 添加一些示例标记
        if (day === 5) {
          dayData.hasBadge = true;
          dayData.badgeColor = "blue";
        } else if (day === 14) {
          dayData.hasBadge = true;
          dayData.badgeColor = "green";
        }

        days.push(dayData);
      }

      this.calendarDays = days;
    },
    getDayClass(day) {
      if (!day.day) return "empty";
      if (day.isToday) return "today";
      return "normal";
    },
    selectDay(day) {
      if (!day.day) return;

      // 更新选中日期
      this.calendarDays.forEach((d) => {
        if (d.day) {
          d.isToday = d.day === day.day;
        }
      });

      this.selectedDay = day.day;
      this.selectedMonth = this.currentMonth;
    },
    previousMonth() {
      if (this.currentMonth === 1) {
        this.currentYear--;
        this.currentMonth = 12;
      } else {
        this.currentMonth--;
      }
      this.generateCalendar();
    },
    nextMonth() {
      if (this.currentMonth === 12) {
        this.currentYear++;
        this.currentMonth = 1;
      } else {
        this.currentMonth++;
      }
      this.generateCalendar();
    },
    goBack() {
      uni.navigateBack();
    },
    enterLive() {
      uni.navigateTo({
        url: "/pages/live",
      });
    },
  },
};
</script>

<style scoped>
.calendar-page {
  min-height: 100vh;
  background-color: #ffffff;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  font-size: 24rpx;
  color: #9ca3af;
  background-color: #ffffff;
}

.status-icons {
  display: flex;
  gap: 16rpx;
}

/* 导航栏 */
.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f3f4f6;
}

.nav-left {
  position: absolute;
  left: 16px;
  font-size: 20px;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

/* 页面内容 */
.page-content {
  padding: 0 32rpx;
  box-sizing: border-box;
}

/* 月份切换 */
.month-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24rpx;
  margin-bottom: 24rpx;
}

.switch-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  background-color: #f3f4f6;
  border-radius: 16rpx;
  font-size: 28rpx;
  border: none;
}

.btn-text {
  font-size: 28rpx;
  color: #6b7280;
}

.current-month {
  font-size: 28rpx;
  font-weight: 600;
  color: #111827;
}

/* 星期标题 */
.week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.week-day {
  text-align: center;
  font-size: 24rpx;
  color: #6b7280;
}

/* 日历网格 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.day-item {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  background-color: #f9fafb;
}

.day-item.empty {
  background-color: transparent;
}

.day-item.today {
  background-color: #2563eb;
}

.day-number {
  font-size: 28rpx;
  color: #111827;
}

.day-item.today .day-number {
  color: #ffffff;
  font-weight: 600;
}

.day-badge {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
}

.day-badge.blue {
  background-color: #2563eb;
}

.day-badge.green {
  background-color: #10b981;
}

/* 当日安排 */
.daily-schedule {
  margin-top: 32rpx;
}

.schedule-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #111827;
  display: block;
  margin-bottom: 16rpx;
}

.schedule-card {
  background-color: #ffffff;
  border: 1rpx solid #f3f4f6;
  border-radius: 24rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.schedule-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.schedule-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.schedule-time {
  font-size: 24rpx;
  color: #6b7280;
}

.enter-btn {
  padding: 12rpx 24rpx;
  background-color: #2563eb;
  border-radius: 16rpx;
  border: none;
}

.enter-text {
  font-size: 24rpx;
  color: #ffffff;
}

.bottom-space {
  height: 80rpx;
}
</style>
